import React from 'react'
import { TrendingUp } from 'lucide-react'
import LineChart from '@/components/charts/LineChart'
import DoughnutChart from '@/components/charts/DoughnutChart'
import BarChart from '@/components/charts/BarChart'
import { ChartData, MonitorPerformanceMetrics, TopicStats } from '@/types/monitor'

interface PerformanceChartsProps {
  showCharts: boolean
  chartData: ChartData | null
  selectedTimeRange: string
  onTimeRangeChange: (timeRange: string) => void
  performanceMetrics: MonitorPerformanceMetrics | null
  topicStats: TopicStats[]
}

export default function PerformanceCharts({
  showCharts,
  chartData,
  selectedTimeRange,
  onTimeRangeChange,
  performanceMetrics,
  topicStats
}: PerformanceChartsProps) {
  if (!showCharts || !chartData) {
    return null
  }

  return (
    <div className="mb-6">
      <div className="bg-white rounded-lg shadow-sm border p-6">
        <div className="flex justify-between items-center mb-6">
          <div>
            <h3 className="text-lg font-semibold flex items-center">
              <TrendingUp className="w-5 h-5 mr-2 text-blue-500" />
              性能趋势图表
            </h3>
            <p className="text-sm text-gray-600">系统性能指标的历史趋势</p>
          </div>
          <div className="flex items-center space-x-2">
            <span className="text-sm text-gray-500">时间范围:</span>
            <select
              value={selectedTimeRange}
              onChange={(e) => onTimeRangeChange(e.target.value)}
              className="text-sm border rounded px-2 py-1"
            >
              <option value="1h">最近1小时</option>
              <option value="6h">最近6小时</option>
              <option value="24h">最近24小时</option>
              <option value="7d">最近7天</option>
            </select>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* 系统资源使用率图表 */}
          <div>
            <LineChart
              data={chartData.systemUsage}
              title="系统资源使用率"
              height={300}
              yAxisLabel="使用率 (%)"
              showLegend={true}
            />
          </div>

          {/* Kafka消息速率图表 */}
          <div>
            <LineChart
              data={chartData.kafkaMetrics}
              title="Kafka消息速率"
              height={300}
              yAxisLabel="消息/秒"
              showLegend={true}
            />
          </div>
        </div>

        {/* Topic分区数量柱状图 */}
        {topicStats.length > 0 && (
          <div className="mt-6">
            <BarChart
              data={chartData.topicPartitions}
              title="Topic分区数量分布"
              height={250}
              yAxisLabel="分区数量"
              showLegend={false}
            />
          </div>
        )}

        {/* 实时性能指标圆环图 */}
        {performanceMetrics && (
          <div className="mt-6">
            <h4 className="text-md font-semibold mb-4">当前系统状态</h4>
            <div className="flex justify-center space-x-8">
              <DoughnutChart
                value={performanceMetrics.cpu_usage}
                label="CPU"
                color="auto"
                size={100}
              />
              <DoughnutChart
                value={performanceMetrics.memory_usage}
                label="内存"
                color="auto"
                size={100}
              />
              <DoughnutChart
                value={performanceMetrics.disk_usage}
                label="磁盘"
                color="auto"
                size={100}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
